﻿@using Cnm.Mvc.Web.Infrastructure
@model List<Cnm.Models.ViewModels.PictureViewModel>

@if (Model == null || Model.Count <= 0)
{
    return;
}

<link href="~/Content/RoyalSlider/css/royalslider.css" rel="stylesheet" />
<script src="~/Content/RoyalSlider/js/jquery.royalslider.min.js"></script>
<link href="~/Content/RoyalSlider/css/rs-default.css" rel="stylesheet" />

<div id="colorbox-items">
    <div id="product-details-gallery" class="royalSlider rsDefault">
        @foreach (var image in Model.OrderBy(p=>p.DisplayOrder))
        {
            <div>
                <a class="rsImg" data-rsbigimg="" href="@Url.Content("~" + WebManager.PostImageNormalFolderPath + image.PictureName)">
                    @image.PictureName
                    <img class="rsTmb" src="@Url.Content(WebManager.PostImageThumbFolderPath + image.PictureName)">
                </a>
            </div>
        }
    </div>
</div>
    <script>
        jQuery(document).ready(function ($) {
            $('#product-details-gallery').royalSlider({
                fullscreen: {
                    enabled: true,
                    nativeFS: false
                },
                controlNavigation: 'thumbnails',
                autoScaleSlider: true,
                autoScaleSliderWidth: 750,
                autoScaleSliderHeight: 500,
                loop: true,
                imageScaleMode: 'fit-if-smaller',
                navigateByClick: true,
                numImagesToPreload: 2,
                arrowsNav: true,
                arrowsNavAutoHide: true,
                arrowsNavHideOnTouch: true,
                keyboardNavEnabled: true,
                fadeinLoadedSlide: true,
                globalCaption: false,
                globalCaptionInside: false,
                thumbs: {
                    appendSpan: true,
                    firstMargin: true,
                    paddingBottom: 4,
                    thumbArrow: true,
                    spacing: 20
                    
                },
                imgHeight: 500
            });
        });

        //$('#product-details-gallery').bind('click', function (e) {
        //    e.preventDefault();

        //    $('.rsMainSlideImage').colorbox();
        //});
    </script>
